<template>
	<view>
		<view class="smallBox" v-if="index==1">
			<slot></slot>
		</view>

		<view class="slargeBox" v-if="index==2">
			<view class="slargeBox-title" v-show="header">
				<image :src="images" v-if="showImage"></image>
				<uni-icons :type="typeIcons" :color="colorIcons" size="10" v-else></uni-icons>
				<text :class="[showImage?'Images':'iconImage']" :style="{color:color}">{{title}}</text>
			</view>
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name: "URCARD",
		computed: {
			classColor() {
				return [...this.className]
			}
		},
		props: {
			// 默认第一个卡片
			index: {
				type: Number,
				default: 1
			},
			// 默认显示标题
			header: {
				type: Boolean,
				default: true
			},
			// 默认不展示照片,暂时图标
			showImage: {
				type: Boolean,
				default: false
			},
			// 默认自带icon
			typeIcons:{
				type: String,
				default: 'smallcircle-filled'
			},
			// 默认icon图标颜色
			colorIcons:{
				type: String,
				default: '#1FC899'
			},
			// 标题信息
			title: {
				type: String,
				default: '标题信息'
			},
			// 默认字体颜色
			color: {
				type: String,
				default: '#333'
			},
			// 照片
			images: {
				type: String,
				default: '../../static/not.png'
			},
			// 标签自定义样式名称
			className: {
				type: Array,
				default: () => {
					return []
				}
			},
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="less" scoped>
	.smallBox {
		margin: 24rpx 40rpx;
		padding: 32rpx 24rpx;
		background-color: #fff;
		box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(234, 234, 234, 0.5);
		border-radius: 8rpx;
	}

	.slargeBox {
		padding: 38rpx 40rpx;
		background-color: #fff;
	}

	.slargeBox-title {
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		text-align: left;
		font-style: normal;
		display: flex;
		align-items: center;

		>image {
			width: 28rpx;
			height: 30rpx;
		}
	}

	.iconImage {
		font-size: 34rpx;
		margin-left: 16rpx;
	}

	.Images {
		font-size: 36rpx;
		margin-left: 20rpx;
	}
</style>